<template>
  <div class="container">
    <!-- 查询表单 -->
    <div class="config">
      <el-form>
        <el-form-item label="申请人:">
          <el-input v-model="form.people"></el-input>
        </el-form-item>
        <el-form-item label="申请时间:">
          <el-date-picker
            v-model="form.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="入库地点:">
          <el-select v-model="form.area" placeholder="--请选择--">
            <el-option
              v-for="item in area"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 弹窗 -->
    <el-drawer
      :title="alertTitle"
      :before-close="handleClose"
      :visible.sync="dialog"
      direction="rtl"
      :modal="false"
      custom-class="demo-drawer"
      ref="drawer"
    >
      <div class="demo-drawer__content">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="标题" prop="title">
            <el-input v-model="ruleForm.title"></el-input>
          </el-form-item>
          <el-form-item label="出入库类型" prop="outbound">
            <el-select v-model="ruleForm.outbound" placeholder="请选择活动区域">
              <el-option
                v-for="item in outbound"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间" required>
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-date-picker
                  v-model="ruleForm.date1"
                  type="datetime"
                  placeholder="选择日期时间"
                  align="right"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="记录类型" prop="record">
            <el-select v-model="ruleForm.record" placeholder="--请选择--">
              <el-option
                v-for="item in record"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="人员名称" prop="people">
            <el-select v-model="ruleForm.people" multiple placeholder="请选择">
              <el-option
                v-for="item in people"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="人员类型" prop="peopleType">
            <el-select v-model="ruleForm.peopleType" placeholder="--请选择--">
              <el-option
                v-for="item in peopleType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="content">
            <el-input type="textarea" v-model="ruleForm.content"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >立即创建</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
    <!-- 表格 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      :default-sort="{ prop: 'date', order: 'descending' }"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column type="index" label="序号" center> </el-table-column>
      <el-table-column label="申请日期" prop="date" sortable width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column label="入库时间" prop="date" sortable>
        <template slot-scope="scope">{{ scope.row.time }}</template>
      </el-table-column>
      <el-table-column prop="address" label="入库地点" sortable width="120">
      </el-table-column>
      <el-table-column prop="people" label="申请人" sortable> </el-table-column>
      <el-table-column prop="type" label="当前状态" sortable width="120">
      </el-table-column>
      <el-table-column prop="reason" label="入库原因" sortable>
      </el-table-column>
   <el-table-column prop="content" label="备注" sortable>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      //  查询表单
      form: {
        area: '',
        time: '',
        people: '',
      },
      // 库房选择
      area: [
        {
          value: 0,
          label: '1号展厅',
        },
        {
          value: 1,
          label: '1号展柜',
        },
      ],
      // 出入库类型
      type: [
        {
          value: 0,
          label: '提交',
        },
        {
          value: 1,
          label: '审核通过',
        },
        {
          value: 2,
          label: '审核不通过',
        },
        {
          value: 3,
          label: '归档',
        },
      ],
      //弹窗
      alertTitle: '审核入库申请',
      table: false,
      dialog: false,
      loading: false,
      formLabelWidth: '80px',
      timer: null,
      ruleForm: {
        title: '',
        outbound: '',
        date1: '',
        record: '',
        people: [],
        peopleType: '',
        content: '',
      },
      outbound: [
        {
          value: 0,
          label: '出库',
        },
        {
          value: 1,
          label: '入库',
        },
        {
          value: 2,
          label: '信息变更',
        },
      ],
      people: [
        {
          value: 0,
          label: '系统管理员',
        },
        {
          value: 1,
          label: '金馆长',
        },
        {
          value: 2,
          label: '审核员',
        },
        {
          value: 3,
          label: '管理员',
        },
      ],
      //记录类型
      record: [
        { value: 0, label: '藏品' },
        { value: 1, label: '资料' },
        { value: 2, label: '人员' },
        { value: 3, label: '物品' },
        { value: 4, label: '其他日常事项' },
      ],
      //人员类型
      peopleType: [
        { value: 0, label: '库房管理员' },
        { value: 1, label: '紧急入库人员' },
        { value: 2, label: '非紧急入库人员' },
      ],
      rules: {
        title: [
          { required: true, message: '请输入标题名称', trigger: 'blur' },
          {
            min: 1,
            max: 10,
            message: '长度在 1 到 10 个字符',
            trigger: 'blur',
          },
        ],
        outbound: [
          { required: true, message: '请选择出入库', trigger: 'change' },
        ],
        date1: [
          {
            type: 'date',
            required: true,
            message: '请选择日期',
            trigger: 'change',
          },
        ],
        record: [{ required: true, message: '请选择类型', trigger: 'change' }],
        people: [
          {
            type: 'array',
            required: true,
            message: '请选择人员',
            trigger: 'change',
          },
        ],
        peopleType: [
          { required: true, message: '请选择人员类型', trigger: 'blur' },
        ],
      },
      // 表格数据
      tableData: [
        {
          date: '2016-05-03',
          address: '1号展柜',
          time: '2021-03-23 10:36:38',
          people: '系统管理员',
          type: '归档',
          reason: '民间赠予青铜剑',
          content:'妥善保存'
        },
        {
          date: '2016-05-03',
          time: '2021-03-23 10:36:38',
          address: '1号展柜',
          people: '系统管理员',
          type: '归档',
          reason: '民间赠予青铜剑',
          content:'妥善保存'
        },
        {
          date: '2016-05-03',
          time: '2021-03-23 10:36:38',
          address: '1号展柜',
          people: '系统管理员',
          type: '归档',
          reason: '民间赠予青铜剑',
          content:'妥善保存'
        },
        {
          date: '2016-05-03',
          time: '2021-03-23 10:36:38',
          address: '1号展柜',
          people: '系统管理员',
          type: '归档',
          reason: '民间赠予青铜剑',
          content:'妥善保存'
        },
        {
          date: '2016-05-03',
          time: '2021-03-23 10:36:38',
          address: '1号展柜',
          people: '系统管理员',
          type: '归档',
          reason: '民间赠予青铜剑',
          content:'妥善保存'
        },
        {
          date: '2016-05-03',
          time: '2021-03-23 10:36:38',
          address: '1号展柜',
          people: '系统管理员',
          type: '归档',
          reason: '民间赠予青铜剑',
          content:'妥善保存'
        },
        {
          date: '2016-05-03',
          time: '2021-03-23 10:36:38',
          address: '1号展柜',
          people: '系统管理员',
          type: '归档',
          reason: '民间赠予青铜剑',
          content:'妥善保存'
        },
      ],
    };
  },
  methods: {
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm('确定要提交表单吗？')
        .then((_) => {
          this.loading = true;
          this.timer = setTimeout(() => {
            done();
            setTimeout(() => {
              this.loading = false;
            }, 400);
          }, 2000);
        })
        .catch((_) => {
          this.loading = false;
          this.dialog = false;
        });
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handlelist(index, row) {
      console.log(index, row);
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    // 查询方法
    search() {},
  },
};
</script>

<style lang="scss" scoped>
.config {
  overflow: hidden;
}
.config .el-form-item {
  float: left;
  display: flex;
  margin-right: 15px;
  margin-bottom: 5px;
  margin-top: 5px;
}
.el-form-item ::v-deep.el-form-item__label {
  text-align: center;
}
.config .el-form-item ::v-deep .el-form-item__label {
  width: 100px;
  text-align: center;
  background: #ddd;
}
.el-select {
  float: left;
}
.btn {
  height: 100%;
  border: 0;
  background: #019688;
  color: #fff;
  padding-left: 20px;
  padding-right: 20px;
}
.container {
  padding-bottom: 100px;
  overflow: hidden;
}
</style>

